<template>
  <!-- <div class="home-box"> -->
  <van-swipe class="my-swiper" :autoplay="3000" height="180">
    <van-swipe-item v-for="item in homeData.slides" :key="item.id">
      <van-image radius="5" :src="item.pic_image_url" />
    </van-swipe-item>
  </van-swipe>

  <van-row justify="space-around">
    <van-col v-for="item in homeData.nav2s" span="11" :key="item.id">
      <van-image
        radius="10"
        :src="item.pic_image_url"
        @click="createOrderClick()"
      />
    </van-col>
  </van-row>
  <template v-for="item in homeData.hospitals" :key="item.id">
    <van-row justify="space-around" @click="createOrderClick(item.id)">
      <van-col span="6">
        <van-image radius="5" width="100" height="90" :src="item.avatar_url" />
      </van-col>
      <van-col span="15">
        <div>{{ item.name }}</div>
        <div>{{ item.rank }}&nbsp;{{ item.label }}</div>
        <div>{{ item.intro }}</div>
      </van-col>
    </van-row>
  </template>
  <!-- </div>3 -->
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
const homeData = reactive({
  hospitals: [],
  nav2s: [],
  navs: [],
  slides: [],
  now: 0,
});
const router = useRouter();

const getHomeData = async () => {
  const res = await proxy.$api.getHomeData().then();
  if (res) {
    Object.assign(homeData, res);
    // homeData = res
    console.log(homeData);
  }
};
onMounted(() => {
  getHomeData();
});

const createOrderClick = (id) => {
  console.log(id);
  router.push(`/createOrder${id ? "?id=" + id : ""}`);
};
</script>

<style lang="less" scoped>
// .home-box {
//   height: 100%;
//   overflow-y: scroll;
// }
.my-swiper {
  margin: 5px;
}
</style>
